﻿<style type="text/css">
    .name {
        text-align: right;
    }
    
    .position-relative {
        padding-bottom: 0;
    }
</style>

<div class="Shopping-ProductEdit">
    <div class="tabbable">
        <ul class="nav nav-tabs">
            <li class="pull-right">
                <a href="javascript:" data-bind="click:back" class="btn btn-sm btn-primary">返回</a>
            </li>
            <li class="pull-right">
                <a href="javascript:" data-bind="click:save" class="btn btn-sm btn-primary" data-dialog="toast:'产品已经成功保存'">保存</a>
            </li>
        </ul>
    </div>
    <br />

    <div class="row">
        <div class="col-sm-12">
            <h5>基本信息</h5>
        </div>
    </div>
    <div class="row form-group">
        <div class="col-lg-4 col-md-4">
            <label class="col-lg-3">*类别</label>
            <div class="col-lg-9">
                <select name="ProductCategoryId" data-bind="options:categories,optionsValue:'Id',optionsText:'Name',value:product.ProductCategoryId,"
                    class="form-control"></select>
            </div>
        </div>
        <div class="col-lg-4 col-md-4">
            <label class="col-lg-3">*名称</label>
            <div class="col-lg-9">
                <input data-bind="value:product.Name" class="form-control" placeholder="请输入产品的名称" />
            </div>
        </div>
        <div class="col-lg-4  col-md-4">
            <label class="col-lg-3">品牌</label>
            <div class="col-lg-9">
                <select data-bind="options:brands,optionsValue:'Id',optionsText:'Name',value:product.BrandId" class="form-control"></select>
            </div>
        </div>

    </div>

    <div class="row form-group">
        <div class="col-lg-4 col-md-4">
            <label class="col-lg-3">SKU</label>
            <div class="col-lg-9">
                <input data-bind="value:product.SKU" class="form-control" />
            </div>
        </div>
        <div class="col-lg-4 col-md-4">
            <label class="col-lg-3">*单位</label>
            <div class="col-lg-9">
                <input data-bind="value:product.Unit" class="form-control" />
            </div>
        </div>
        <div class="col-lg-4 col-md-4">
            <label class="col-lg-3">*价格</label>
            <div class="col-lg-9">
                <div class="input-group">
                    <input data-bind="value:product.Price" class="form-control" placeholder="请输入产品价格" />
                    <span class="input-group-addon">
                        元
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="row form-group">
        <div class="col-lg-4 col-md-4">
            <label class="col-lg-3">
                积分
            </label>
            <div class="col-lg-9">
                <input data-bind="value:product.Score" class="form-control" placeholder="请输入积分" />
            </div>
        </div>

        <!--<div class="col-lg-4 col-md-4">
            <label class="col-lg-3">
                归组到
            </label>
            <div class="col-lg-9">
                <div class="input-group">
                    <input data-bind="value:product.Group.Name" class="form-control" placeholder="请选择产品组" readonly />
                    <span data-bind="click:showProductGroupDialog" class="input-group-addon">
                        <i class="icon-plus"></i>
                    </span>
                </div>
            </div>

        </div>-->
    </div>

    <hr />

    <product-properties params="properties:product.Fields,name:'价格参数'"></product-properties>
    <hr/>

    <product-properties params="properties:product.Arguments,name:'商品属性'"></product-properties>
    <hr/>  
    <div class="row">
        <div class="col-sm-12">
            <h5>商品详情</h5>
        </div>
    </div>
    <script id="productEditEditor" data-bind="html:product.Introduce" type="text/html">
    </script>

    <hr/>

    <div class="row">
        <div class="col-sm-12">
            <h5>商品图片</h5>
        </div>
    </div>
    <div class="row form-group">
        <!-- ko foreach:product.ImagePaths-->
        <div class="text-center" style="float:left;border:solid 1px #ccc;margin-left:12px;width:114px;height:114px;">
            <img data-bind="attr:{src:$data}" style="width:112px;height:112px;" alt="+">
            <div style="position:relative;bottom:18px;background-color:rgba(0, 0, 0, 0.55);color:white">
                <a data-bind="click:$root.remove" href="javascript:" style="color:white">
                    删除
                </a>
            </div>
        </div>
        <!-- /ko -->

        <a class="fileinput-button" style="float:left;padding:0 12px 0 12px;">
            <div class="text-center" style="width:112px;height:112px;padding:30px 0 0 0;border:solid 1px #ccc;">
                <i class="icon-plus icon-4x"></i>
                <div>图片上传</div>
            </div>
            <input name="ImageUpload" type="file" style="position:relative;top:-112px;left:0px;opacity:0;width:112px;height:112px;">
        </a>
    </div>

</div>